<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>depth path viewer</title>
    <style>
        body {
            background-color: #2a2a2a;
            color: #dcdcdc;
        }

        .ipts {
            background-color: #2a2a2a;
            color: #dcdcdc;
            border: 1px solid #fff;
            margin-top: 1em;
        }

        svg circle {
            fill: #569cd6;
            z-index: 4;
        }

        svg text {
            fill: #fcfcfc;
            font-size: 16px;
            font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', 'sans-serif';
            z-index: 1;
        }

        svg line {
            stroke: #569cd6;
            stroke-width: 2px;
            z-index: 8;
        }
    </style>
</head>

<body>
    <label for="IPT">Input Hex: </label> <input id="IPT" class="ipts"> <span id="DEPTH"></span>
    <br>
    <textarea id="TREE_PATH" rows="10" cols="240" class="ipts"></textarea>
    <br>

    <!-- <div id="main" style="width: 3600px;height:9600px;"></div> -->
    <!-- <svg height="900" width="46080" id="SVG_TREE"> </svg> -->

    <script src="https://cdn.staticfile.org/echarts/5.1.1/echarts.min.js"></script>
    <script src="./depthTreeBranches_7bit.js"></script>
    <script>
        const IPT = document.querySelector('#IPT');
        const TREE_PATH = document.querySelector('#TREE_PATH');
        const DEPTH = document.querySelector('#DEPTH');

        const getPath = hex => {

            let curr = TREE[hex];
            if (!curr) return getPath(1);

            let next = TREE[curr.next]
            let stack = [];

            do {
                // console.log("curr  %o: next %o", curr, next);

                if (!next || curr.curr <= 3) {
                    TREE_PATH.textContent = stack.map(e => e.curr).join(' -> ');
                    DEPTH.textContent = `Depth : ${stack.length}`;
                    break;
                }

                stack.push(curr);

                curr = next;
                next = TREE[curr.next];
            } while (true)

        }

        IPT.addEventListener('change', () => {
            getPath(IPT.value);
        })
    </script>
    <!-- <script>
        const SVG_TREE = document.querySelector('#SVG_TREE');
        // const SVG_WIDTH = NOTE_MARGIN_X << (calc_depth - 1);
        // const SVG_HEIGHT = NOTE_MARGIN_Y * (calc_depth + 2);

        SVG_TREE.attributes.width = SVG_WIDTH;
        SVG_TREE.attributes.height = SVG_HEIGHT;

        const getX = note => {
            let X;
            let next = TREE[note.next];
            if (!next) {
                X = 0;
            } else {
                // Rewrite Into Tree Object; Child count.
                if (!!next.child) {
                    // X = next.X - NOTE_MARGIN_X;
                    // X = next.X - Math.round(SVG_WIDTH >> (note.depth - 1));
                    // Almost No Greater Than Two Child.
                    next.child.push[note];
                } else {
                    // X = next.X + NOTE_MARGIN_X;
                    // X = next.X + Math.round(SVG_WIDTH >> (note.depth - 1));
                    next.child = [note];
                }

                // console.log(note.curr,note.depth,X);
            }

            // if (note.curr >= 4) {

            // } else if (note.curr == 2) {
            //     X = NOTE_MARGIN_X * 2;
            // } else if (note.curr == 1) {
            //     X = NOTE_MARGIN_X;
            // } else if (note.curr == 3) {
            //     X = NOTE_MARGIN_X * 3;
            // }

            // Rewrite Into Tree Object; X position
            TREE[note.curr].X = X;

            return X;
        }

        const getY = note => {
            let Y = 30 + note.depth * NOTE_MARGIN_Y;
            TREE[note.curr].Y = Y;
            return Y;
        }



        const drawCircle = note => {
            if (!note.X) return false;

            let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
            line.setAttribute("x1", TREE[note.next].X);
            line.setAttribute("y1", TREE[note.next].Y);
            line.setAttribute("x2", note.X);
            line.setAttribute("y2", note.Y);
            SVG_TREE.appendChild(line);

            // let group = document.createElementNS("http://www.w3.org/2000/svg", "group");

            let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            circle.setAttribute("cx", note.X);
            circle.setAttribute("cy", note.Y);
            circle.setAttribute("r", 30);
            SVG_TREE.appendChild(circle);

            let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
            text.setAttribute("x", note.X - (note.curr.toString().length / 2 * 8));
            text.setAttribute("y", note.Y + 6);
            text.textContent = note.curr.toString();
            SVG_TREE.appendChild(text);

            note.line = line;
            note.circle = circle;
            note.text = text;

        }

        const draw = () => {

            // init from note : 12
            drawArray[4][1].X = Math.round(SVG_WIDTH >> 1);
            drawArray[4][1].Y = Math.round(NOTE_MARGIN_Y * 1.5);
            drawCircle(drawArray[4][1]);

            for (let i = 5, note = null; i < drawArray.length; i++) {
                // const [curr, note] = drawArray[i];
                note = drawArray[i][1];
                getX(note);
                getY(note);
                drawCircle(note);
                // console.log('%o', note);
            }

            console.log('Begin Draw');
            setTimeout(() => {
                // TreeView.setOption(SVG_Option);
            }, 100);
        }

        draw();

    </script> -->
    <!-- <script>
        // Init Echarts by DOM
        const TreeView = echarts.init(document.getElementById('main'), 'dark', { renderer: 'svg' });

        const TreeNotes = [];
        const TreeBranchs = [];

        // 指定图表的配置项和数据
        const SVG_Option = {
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    animation: false,
                    symbol: 'roundRect',
                    symbolSize: 48,
                    label: {
                        show: true
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 8],
                    // force: {
                    //     // initLayout: 'circular',
                    //     // gravity: 50,
                    //     repulsion: 200,
                    //     edgeLength: 300,
                    // },
                    emphasis: {
                        focus: 'adjacency',
                        lineStyle: {
                            width: 10
                        }
                    },
                    notes: TreeNotes,
                    edges: TreeBranchs,
                }
            ]
        };

        const draw = () => {


            for (let i = 0; i < drawArray.length; i++) {
                const [curr, note] = drawArray[i];
                TreeNotes.push({ name: curr, id: curr, x: getX(note), y: getY(note) });
                TreeBranchs.push({ source: curr, target: note.next.toString() });
            }

            console.log('Begin Draw');
            setTimeout(() => {
                TreeView.setOption(SVG_Option);
            }, 100);
        }

        draw();

    </script> -->
    <script>
        return ; // For Stop Codes Run Follower. 
        // Init Echarts by DOM
        const TreeView = echarts.init(document.getElementById('main'), 'dark', { renderer: 'svg' });
        const option = {
            // tooltip: {
            //     trigger: 'item',
            //     triggerOn: 'mousemove'
            // },
            series: [
                {
                    type: 'tree',
                    symbolSize: 7,
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    },
                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },
                    // emphasis: {
                    //     focus: 'descendant'
                    // },
                    expandAndCollapse: false,
                    initialTreeDepth: -1,

                }
            ]
        }

        // 使用刚指定的配置项和数据显示图表。
        TreeView.setOption(option);

        const calc_depth = 30;

        Array.from(Object.entries(TREE))
            .filter(e => e[1].depth <= calc_depth)
            .forEach(e => {
                let note = e[1];
                // note.name = note.curr.toString();
                let next = TREE[note.next];
                if (!next) {
                    return;
                } else {
                    if (!!next.children) {
                        next.children.push(note.curr);
                    } else {
                        next.children = [note.curr];
                    }
                }
            });
        // .sort((a, b) => a.depth - b.depth)
        // .slice(4);

        // const DDD = {
        //     "name": 12,
        //     "children": [
        //         {
        //             "name": 2435,
        //             "children": [
        //                 {
        //                     "name": 346346,
        //                     "children": [
        //                         { "name": 1235 },
        //                         { "name": 5365 },
        //                         { "name": 46 },
        //                         { "name": 63463 }
        //                     ]
        //                 },
        //             ]
        //         }]
        // };


        const composeData = leaf => {
            let note = TREE[leaf.name];
            if (!note || !note.children) return;
            leaf.children = note.children.map(ch => ({ "name": ch }));
            leaf.children.forEach(ch => composeData(ch))
        }

        const drawData = { name: 12 };

        // composeData(drawData);

        let handler = setTimeout(() => {

            TreeView.setOption({
                series: [{
                    data: [drawData]
                }]
            })
        }, 1000);

    </script>
</body>

</html>